<template>
  <div class="app-container">
    <div class="el-flex">
      <div class="el-flex-1">
        <el-button type="primary" size="small" @click="dialogVisible=true">添加标签组</el-button>
      </div>
      <el-button plain size="small">同步企微标签</el-button>
    </div>
    <el-card style="margin-top:15px">
      <el-form ref="form" :model="form" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="可用部门：" size="small" style="margin-bottom:0">
              <el-input v-model="model"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="搜索：" size="small" style="margin-bottom:0">
              <el-input v-model="model" suffix-icon="el-icon-search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button size="small" style="float:right">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:15px">
      <div slot="header">共16个标签</div>
      <div class="el-flex tag-group">
        <div class="tag-group-name">
          <p>商业拓展</p>
          <span>共2个标签</span>
        </div>
        <div class="el-flex-1 enter">
          <div>可见范围： 全部员工可用</div>
          <div style="margin-top:15px">
            <el-button class="button-new-tag" size="mini" @click="showInput" icon="el-icon-plus" style="margin-bottom:15px"> 添加</el-button>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-tag :key="tag" v-for="tag in dynamicTags" style="margin-left:15px;margin-bottom:15px" type="info"> {{tag}} </el-tag>
          </div>
        </div>
        <div>
          <span class="clickable"><i class="el-icon-upload2"></i>上移</span>
          <el-divider direction="vertical"></el-divider>
          <span class="clickable"><i class="el-icon-download"></i>下移</span>
          <el-divider direction="vertical"></el-divider>
          <span class="clickable"><i class="el-icon-edit-outline"></i>编辑</span>
        </div>
      </div>
    </el-card>
    <el-dialog title="新建标签组" :visible.sync="dialogVisible" width="520px" :before-close="dialogBeforeClose">
      <el-tag style="width:100%"> <i class="el-icon-message-solid"></i>管理员可根据不同部门选择展示不同的标签组，部门管理员可创建部门可见的标签</el-tag>
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" style="margin-top:15px">
        <el-form-item prop="email" label="标签组名称：" size="small">
          <el-input v-model="dynamicValidateForm.email"></el-input>
        </el-form-item>
        <el-form-item label="可见范围：">
          <el-radio-group v-model="dynamicValidateForm.member">
            <el-radio label="1">全部员工</el-radio>
            <el-radio label="2">部门可用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item size="small" label="标签名称：">
          <div v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key" class="el-flex" style="margin-bottom:10px">
            <div class="el-flex-1">
              <el-input v-model="domain.value" size="small"></el-input>
            </div>
            <div class="action">
              <i class="el-icon-remove-outline" @click.prevent="removeDomain(domain)"></i>
              <i class="el-icon-upload2"></i>
              <i class="el-icon-download"></i>
            </div>
          </div>
          
        </el-form-item>
        <el-form-item size="small">
          <el-button type="primary" @click="addDomain" size="small"><i class="el-icon-plus"></i>添加标签</el-button>
        </el-form-item>
        <div style="text-align:right">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"  size="small">确 定</el-button>
        </div>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicTags: ['大客户', 'A客户', 'B客户'],
      inputVisible: false,
      inputValue: '',
      dialogVisible: false,
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
      }
    }
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.clickable {
  cursor: pointer;
  color: #777;
}
.tag-group {
  border-bottom: 1px dashed #e1e1e1;
  padding: 20px 0;
  align-items: flex-start;
  .tag-group-name {
    width: 100px;
    p {
      color: #222;
      font-weight: 600;
      font-size: 15px;
      word-break: break-all;
      margin-top: 0;
    }
    span {
      font-size: 13px;
    }
  }
  .enter {
    padding: 0 30px;
  }
}
.input-new-tag {
  width: 200px;
  margin-left: 15px;
  margin-bottom: 15px;
}
.action {
  font-size: 18px;
  i {
    margin-left: 10px;
  }
}
</style>